<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .article {
            border: 1px solid black;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 400px;
            height: 160px;

        }

        .aside {
            margin: 20px;
            margin-right: 10px;
            float: left;
        }

        .section {
            width: 360px;
        }

        .in1,.in2 {
            margin-top: 20px;
        }

        .btn {
            margin-left: 170px;
            margin-top: 10px;
            height: 30px;
            width: 4em;
            border-radius: 5px;
            
        }

        .tishi {
            font-size: 12px;
            color: red;
        }

        .img_box {
            width: 40px;
            height: 80px;
            float: right;
            background-image: url(../img/下载.jpg);
            background-position: 374px 222px;

        }

        .cookieSelect {
            margin-top: 10px;
        }

        #btn_cookieShow {
            margin-top: 15px;
            margin-right: 48px;
            margin-bottom: 4px;
            float: right;
            width: 13px;
            height: 13px;
            cursor: pointer;
            background: url(../img/small_icons.jpg) no-repeat -59px -203px/370px 370px;
        }

        .change {
            transform: rotate(-90deg);
        }

    </style>
    <script>
        function init() {
            document.getElementById("btn_cookieShow").addEventListener("click", () => {
                let node = document.getElementsByClassName("cookieSelect")[0];
                if (node.hidden == true) {
                    node.hidden = false;
                    document.getElementById("btn_cookieShow").classList.add("change");

                } else {
                    node.hidden = true;
                    document.getElementById("btn_cookieShow").classList.remove("change");
                }
            }, false)
        } 
        window.addEventListener("load", init, false);

    </script>
</head>

<body>
    <article class="article">
        <aside class="aside">
            <img src="../img/login_logo.jpg" alt="">
            <div class="tishi">用户名或密码错误</div>

        </aside>
        <aside class="img_box"></aside>
        <section class="section">

            用户名：<input class="in1" type="text" name="userName"><br> 密&nbsp&nbsp&nbsp码：
            <input class="in2" type="password" name="password">
            <div id="btn_cookieShow"></div>
            <div hidden class="cookieSelect">
                <input type="checkbox" name="isCookie" value="yes">
                <span style="vertical-align:2px;font-size: 12px">一周之内不需要登录</span>
            </div>
            <button type="submit" class="btn">登录</button>

        </section>

    </article>
</body>

</html>